<template>
    <div v-for="room in info.results" v-bind:key="room.id" id="rooms">
        <div class="room-title">
            {{ room.unit_id }},{{ room.room_id }},{{ room.gender }},{{ room.avail_bed }}
        </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'RoomList',
        data: function () {
            return {
                info: '',
            }
        },
        mounted() {
            axios
                .get('/list')
                .then(response => (this.info = response.data))
        }
    }

</script>

<style>
    #rooms {
        padding: 10px;
    }

    .room-title {
        font-size: large;
        font-weight: bolder;
        color: black;
        text-decoration: none;
        padding: 5px 0 5px 0;
    }
    #header {
        text-align: center;
        margin-top: 20px;
    }
</style>